<template>
  <div class="bar-chart-12 chart" ref="barChart12"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart12 = ref(null);
const echarts = inject("$echarts");

let xAxisData = ["≤2天", "2-7天", "7-14天", "14-28天", "≥28天"];
let seriesData = ["2", "3", "4", "2", "3", "1"];
let attr = {
  name: "事件数",
  unit: "件",
};

let colors = [];
const option = {
  compCode: 'C202309056',
  backgroundColor: "#03171E",
  tooltip: {
    trigger: "item",
    backgroundColor: '#053962', // 设置背景色为半透明红色
    borderColor: '#165e9e', // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: '#fff'
    },
    padding: 1,
    formatter: function (param) {
      let resultTooltip =
        param.name +
        "</div>" +
        "<div style='padding-top:5px;'>" +
        "<span style=''> " +
        attr.name +
        ": </span>" +
        "<span style=''>" +
        param.value +
        "</span><span>" +
        attr.unit +
        "</span>" +
        "</div>" +
        "</div>";
      return resultTooltip;
    },
  },
  // graphic: [{
  //     type: 'text',
  //     z: 100,
  //     right: '4%',
  //     top: '8%',
  //     style: {
  //         fill: '#81A5E8',
  //         text: graphicData.join('\n'),
  //         padding:[20,20],
  //         font: 'italic small-caps  18px/2 cursive',

  //     }
  // }],
  grid: {
    left: "5%",
    top: "10%",
    right: "5%",
    bottom: "10%",
    containLabel: true, // 包含底盘
  },
  legend: {
    show: true,
    icon: "circle",
    orient: "horizontal",
    top: "90.5%",
    right: "center",
    itemWidth: 16.5,
    itemHeight: 6,
    // itemGap: 30,
    textStyle: {
      // color: '#FFFFFF'
      color: "#C9C8CD",
      fontSize: 14,
    },
    
  },
  xAxis: [
    {
      data: xAxisData,
      axisLabel: {
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
        },
        margin: 30, //刻度标签与轴线之间的距离。
      },

      axisLine: {
        show: true, //显示x轴
      },
      axisTick: {
        show: false, //不显示刻度
      },
      boundaryGap: true,
      splitLine: {
        show: false,
        width: 0.08,
        lineStyle: {
          type: "solid",
          color: "#03202E",
        },
      },
    },
  ],
  yAxis: [
    
    {
      name: attr.name + ' (' + attr.unit + ')',
      nameTextStyle: {
        color: "#ffffff",
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#eee",
          type: "solid",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        textStyle: {
          color: "#ffffff",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#57617B",
        },
      },
    },
  ],
  series: [
    // {
    //   name: "",
    //   type: "rect",
    //   z: 10, // 底盘的层级，设置为比柱状图更高的值
    //   itemStyle: {
    //     normal: {
    //       color: "rgba(1, 172, 242, 0.3)", // 底盘的颜色，可以根据需要调整透明度
    //     },
    //   },
    //   data: [
    //     {
    //       x: "10%", // 底盘的左上角 x 坐标
    //       y: "10%", // 底盘的左上角 y 坐标
    //       width: "80%", // 底盘的宽度
    //       height: "80%", // 底盘的高度
    //     },
    //   ],
    // },
    {
      //柱底圆片
      name: "",
      type: "pictorialBar",
      symbolSize: [60, 20],
      symbolOffset: [0, 10],
      z: 12,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(1,172,242)",
            },
            {
              offset: 1,
              color: "rgb(17,54,109)",
            },
          ]),
        },
      },
      data: seriesData,
    },

    //柱体
    {
      name: "",
      type: "bar",
      barWidth: 60,
      barGap: "0%",
      itemStyle: {
        normal: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [
              {
                //第一节下面
                offset: 0,
                color: "rgba(1,172,242,0.7)",
              },
              {
                offset: 1,
                color: "rgba(17,54,109,0.7)",
              },
            ],
          },
        },
      },

      data: seriesData,
      label: {
        show: true,
        position: 'top',
        color: 'white',
        fontSize: 14,
        offset: [0, -10], // 向上偏移的距离
        // formatter: '{c}' + attr.unit,
    },
    },

    //柱顶圆片
    {
      name: "",
      type: "pictorialBar",
      symbolSize: [60, 20],
      symbolOffset: [0, -10],
      z: 12,
      symbolPosition: "end",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(89,211,255,1)",
              },
              {
                offset: 1,
                color: "rgba(23,237,194,1)",
              },
            ],
            false
          ),
        },
      },
      data: seriesData,
    },
  ],
};


onMounted(() => {
  const chart = echarts.init(barChart12.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
